import React, {lazy,Suspense} from 'react';
import Helmet from "react-helmet";
import {goSystem, setScrollTop} from "../../assets/js/utils";
import request from '../../assets/js/utils/request';
import hoc from './indexhoc';
import ScrollAnim from 'rc-scroll-anim';
import {Form, Input ,Button,Cascader,Checkbox,Row,Col} from 'antd';
// import TelPhone from '../../components/tellPhone'
import Css from '../../assets/css/from/index.css';
//挂载 Mock
//import '../../mock/data.js'


const Nav=lazy(()=>import('../../components/nav/index'));
const RNav=lazy(()=>import('../../components/rNav/index'));
const Foot=lazy(()=>import('../../components/foot/index'));
const ScrollParallax =  ScrollAnim.Parallax;

const From = hoc((props)=>{
    return(
        <div>
            <div className={Css['about_banner']} id='indSuccess'>
                {
                    props.aBan!==null || props.aBan!==undefined?
                        <ScrollParallax
                            className={Css['about_banner_bg']}
                            location='indSuccess'
                            style={{backgroundImage:'url('+props.aBan.img+')'}}
                            animation={{y:0, playScale: [0.9, 1.5]}}
                        ></ScrollParallax>
                        :''
                }
                {
                    props.aBan!==null && props.aBan!==undefined?
                    <div className={Css['aboBanCen']}>
                        <span>{props.aBan.title}</span>
                        <p dangerouslySetInnerHTML={{__html:props.aBan.list}}></p>

                    </div>
                        :''
                }

            </div>
            <div className={Css['froEnt']}>
                <ul>
                    {
                        props.aEnt!==undefined && props.aEnt!==null?
                            props.aEnt.map((item,index)=>{
                                return(
                                    <li key={index}>
                                        <div className={Css['froEntImg']}><i className={item.icn}></i></div>
                                        <div className={Css['froEntFont']}>
                                            <p>{item.nub}<sub>{item.sub}</sub></p>
                                            <span>{item.list}</span>
                                        </div>
                                    </li>
                                )
                            })
                            :''
                    }
                </ul>
            </div>
            <div className={Css['froFrom']} id="messageForm">
                <div className={Css['froFromBan']} >
                    <ScrollParallax
                        className={Css['froFromBan_bg']}
                        style={{backgroundImage:'url('+require('../../assets/images/from/fro2.jpg')+')'}}
                        animation={{y:0, playScale: [0, 1.5]}}
                    ></ScrollParallax>
                    <div className={Css['froFromBanCen']}>
                        企业福利 找关爱通
                    </div>
                </div>
                <Form
                    form={props.form}
                    autoComplete="off"
                    name="basic"
                    onFinish={props.onFinish}
                    onFinishFailed={props.onFinishFailed}
                    initialValues={{
                       'checkbox': props.checkedList,
                    }}
                >

                <div className={Css['fro_from_box']}>
                    <div className={Css['fro_from_li']}>
                        <div className={Css['fro_from_title']}><span>*</span>公司</div>
                        <div className={Css['fro_inp']}>
                            <Form.Item
                                name="company_name"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入公司名称'
                                    }
                                    ]}
                            >
                                <Input type='string'  placeholder="请输入公司名称" />
                            </Form.Item>

                        </div>
                    </div>
                    <div className={Css['fro_from_li']}>
                        <div className={Css['fro_from_title']}><span>*</span>姓名<sub>已加密</sub></div>
                        <div className={Css['fro_inp']}>
                            <Form.Item
                                name="Xname"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入姓名'
                                    }
                                ]}
                            >
                                <Input  placeholder="请输入姓名" />
                            </Form.Item>
                        </div>
                    </div>
                    <div className={Css['fro_from_li']} >
                        <div className={Css['fro_from_title']}><span>*</span>公司规模</div>
                        <div className={Css['fro_inp']} id='area'>
                            <Form.Item
                                name="company_size"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入公司规模'
                                    }
                                ]}
                            >
                                <Cascader options={props.residences?props.residences:''}  placeholder="请选择企业规模" popupClassName={Css['popupdeleDefSty']} getPopupContainer={()=>document.getElementById('area')}/>
                            </Form.Item>
                        </div>
                    </div>
                    <div className={Css['fro_from_li']}>
                        <div className={Css['fro_from_title']}><span>*</span>手机号<sub>已加密</sub></div>
                        <div className={Css['fro_inp']}>
                            <Form.Item
                                name="phone"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入手机号'
                                    },
                                    {
                                        pattern: /^1[34578]\d{9}$/ ,
                                        message: '请输入正确的手机号'
                                    }
                                    ]}
                            >
                                <Input  placeholder="请输入手机号" />
                            </Form.Item>
                        </div>
                    </div>
                    <div className={Css['fro_from_li']}>
                        <div className={Css['fro_from_title']}><span>*</span>邮箱</div>
                        <div className={Css['fro_inp']}>
                            <Form.Item
                                name="email"
                                rules={[
                                    {
                                        type: 'email',
                                        message: '请输入正确的邮箱',
                                    },
                                    {
                                        required: true,
                                        message: '请输入邮箱',
                                    }
                                ]}
                            >
                                <Input   placeholder="请输入邮箱"/>
                            </Form.Item>
                        </div>
                    </div>
                    <div className={Css['fro_from_li']}>
                        <div className={Css['fro_from_title']}><span>*</span>电话</div>
                        <div className={Css['fro_inp']}>
                            <Input.Group size="large">
                                <Row gutter={24}>
                                    <Col span={7}>
                                        <Form.Item
                                            name="areapho"
                                            rules={[
                                                {
                                                    pattern: /^(0[0-9]{2,3})?$/,
                                                    message: '请输入正确的区号',
                                                },
                                                {
                                                    required: true,
                                                    message: '请输入区号',
                                                }
                                            ]}
                                        >
                                            <Input placeholder='请输入区号'  />
                                        </Form.Item>
                                    </Col>
                                    <Col span={10}>
                                        <Form.Item
                                            name="landline "
                                            rules={[
                                                {
                                                    pattern: /^([0-9]{6,7})?$/,
                                                    message: '请输入正确的座机号'
                                                },
                                                {
                                                    required: true,
                                                    message: '请输入座机号',
                                                }
                                            ]}
                                        >
                                            <Input placeholder='请输入座机号'  />
                                        </Form.Item>
                                    </Col>
                                    <Col span={7}>
                                        <Form.Item
                                            name="extension"
                                            rules={[
                                                {
                                                    pattern: /^([0-9]{1,4})?$/,
                                                    message: '请输入正确的分机号'
                                                }
                                            ]}
                                        >
                                            <Input placeholder='请输入分机号'  />
                                        </Form.Item>
                                    </Col>
                                </Row>
                            </Input.Group>
                            {/*<Form.Item*/}
                                {/*name="tellPhone"*/}
                                {/*rules={[*/}
                                    {/*{*/}
                                        {/*pattern: /^(0[0-9]{2,3}-)([2-9][0-9]{6,7})+(-[0-9]{1,4})?$/,*/}
                                        {/*message: '请输入正确的座机号'*/}
                                    {/*},*/}
                                    {/*{*/}
                                        {/*required: true,*/}
                                        {/*message: '请输入座机号'*/}
                                    {/*},*/}
                                {/*]}*/}
                            {/*>*/}
                                {/*<TelPhone></TelPhone>*/}
                            {/*</Form.Item>*/}
                        </div>
                    </div>
                    <div className={Css['fro_from_li']}>
                        <div className={Css['fro_from_title']}><span>*</span>职务</div>
                        <div className={Css['fro_inp']}>
                            <Form.Item
                                name="position"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入职务',
                                    }
                                ]}
                            >
                                <Input   placeholder="请输入职务"/>
                            </Form.Item>
                        </div>
                    </div>
                    <div className={Css['fro_from_li']}>
                        <div className={Css['fro_from_title']}><span>*</span>您感兴趣的产品</div>
                        <div className={Css['fro_inp']}>
                            <Form.Item>
                                <Form.Item
                                    name='checkbox'
                                    noStyle
                                    rules={[
                                        {
                                            required: true,
                                            message: '请选择产品',
                                        }
                                    ]}
                                >
                                        <Checkbox.Group
                                            options={props.plainOptions}
                                            value={props.checkedList}
                                            onChange={props.onChange}
                                        ></Checkbox.Group>

                                </Form.Item>
                                <Checkbox
                                    indeterminate={props.indeterminate}
                                    onChange={props.onCheckAllChange}
                                    checked={props.checkAll}
                                >
                                    全选
                                </Checkbox>

                            </Form.Item>

                        </div>
                    </div>
                    <div className={Css['fro_from_li']}>
                        <div className={Css['fro_from_title']}><span>*</span>描述需求</div>
                        <div className={Css['fro_inp']}>
                            <Form.Item
                                name="description"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入描述需求',
                                    }
                                ]}
                            >
                                <Input.TextArea  showCount maxLength={100} placeholder="请输入描述需求"/>
                            </Form.Item>
                        </div>
                    </div>
                    <div className={Css['fro_from_title']+' '+Css['fro_from_title_Tow']}>（<span>* </span>为必填项，提交申请后，工作人员将在一个工作日内与您联系，并对您的资料保密）
                    </div>

                    <div  className={Css['fro_btn_box']} >
                        <Form.Item
                            name="agreement"
                            valuePropName="checked"
                            rules={[
                                {
                                    validator: (_, value) =>
                                        value ? Promise.resolve() : Promise.reject(new Error('请选择')),
                                },
                            ]}
                        >
                            <Checkbox>
                               默认选中
                            </Checkbox>
                        </Form.Item>
                        <Form.Item shouldUpdate>
                            {() => (
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    className={Css['fro_btn']}
                                    disabled={
                                            !props.form.getFieldValue('agreement')
                                        ||
                                            !props.form.isFieldsTouched(['description'])
                                        ||
                                            !!props.form.getFieldsError().filter(({ errors }) => errors.length).length
                                    }
                                    loading={props.loading}
                                >
                                    确认提交
                                </Button>
                            )}
                        </Form.Item>
                    </div>
                </div>
                </Form>
                {
                    props.isSuccess?
                        <div className={Css['form_success']}>
                            提交成功
                        </div>
                        :''
                }
            </div>
        </div>
    )
})
class froms extends React.Component{
    constructor(){
        super();
        this.state={
            title:'企业免费试用-中智关爱通',
            keywords:'企业福利,员工礼品,弹性福利平台,员工福利解决方案',
            description:'关爱通为企业提供完整员工福利解决方案、节日福利、员工礼品、员工激励、员工体检，以及企业弹性福利平台定制。',
            aBan:{},
            aEnt:[],
            residences:[
                {
                    value: 'zhejiang1',
                    label: 'Zhejiang1',
                },
                {
                    value: 'jiangsu',
                    label: 'Jiangsu',
                },
            ],
            plainOptions :['弹性福利平台', '企业节日福利', '员工健康福利','员工心理关爱','员工午餐/交通/培训补贴'],
            defaultCheckedList:[]
        }
    }
    componentDidMount(){
        this.goSystem();
        this.getABanData();
        this.getAEntData();
        setScrollTop(window.base.pages.index.iScrollTop);
    }
    //获取企业数据
    getAEntData(){
        let temAEnt=[],sUrl='from.json';
        request(sUrl,'get').then((res)=>{
            if (res.code===200){
                temAEnt=res.aEnt
            }
            this.setState({aEnt:temAEnt})
        })
    }
    //获取ban数据
    getABanData(){
        let temABan={},sUrl='from.json';
        request(sUrl,'get').then((res)=>{
            if (res.code===200){
                temABan=res.aBan
            }
            this.setState({aBan:temABan})
        })
    }
    //判断跳转平台
    goSystem(){
        goSystem(this.props,'from')
    }
    //页面离开时调用，页面离开时去除滚动事件解决页面切换时内存泄漏，
    componentWillUnmount(){
        window.removeEventListener('scroll',setScrollTop());
        this.setState=(state,callback)=>{
            return;
        }
    }
    render(){
        let newProps={
            aBan:this.state.aBan,
            aEnt:this.state.aEnt,
            residences:this.state.residences,
            plainOptions:this.state.plainOptions,
            defaultCheckedList:this.state.defaultCheckedList,
        }
        return(
            <div>
                <Helmet>
                    <title>{this.state.title}</title>
                    <meta name="keywords" content={this.state.keywords} />
                    <meta name="description" content={this.state.description} />
                </Helmet>
                <Suspense　fallback={<div className={'loadWidth'}></div>} >
                    {/*导航*/}
                    <Nav props={this.props}></Nav>
                    {/*导航*/}
                    {/*右导航*/}
                    <RNav props={this.props}></RNav>
                    {/*右导航*/}
                </Suspense >
                <From {...this.props} {...newProps}></From>
                <Suspense　fallback={<React.Fragment/>}>
                    {/*foot*/}
                    <Foot  props={this.props}></Foot>
                    {/*foot*/}
                </Suspense>
            </div>
        )
    }
}
export default froms